<!DOCTYPE HTML>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<?php 

$cs = Yii::app ()->getClientScript (); 
$cs = Yii::app ()->getClientScript()->registerCoreScript ('jquery'); 
$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/menu/jquery.fixedMenu.js");
$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/fancybox/jquery.fancybox-1.3.4.pack.js");
$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/fancybox/jquery.mousewheel-3.0.4.pack.js");

		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/Three.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/core/Color.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/core/Vector2.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/core/Vector3.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/core/Vector4.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/core/Ray.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/core/Rectangle.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/core/Matrix3.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/core/Matrix4.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/core/Object3D.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/core/Quaternion.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/core/Vertex.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/core/Face3.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/core/Face4.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/core/UV.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/core/Geometry.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/core/Spline.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/core/Edge.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/cameras/Camera.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/lights/Light.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/lights/AmbientLight.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/lights/DirectionalLight.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/lights/PointLight.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/lights/SpotLight.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/materials/Material.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/materials/LineBasicMaterial.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/materials/MeshBasicMaterial.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/materials/MeshLambertMaterial.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/materials/MeshPhongMaterial.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/materials/MeshDepthMaterial.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/materials/MeshNormalMaterial.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/materials/MeshFaceMaterial.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/materials/MeshShaderMaterial.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/materials/ParticleBasicMaterial.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/materials/ParticleCanvasMaterial.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/materials/ParticleDOMMaterial.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/textures/Texture.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/textures/DataTexture.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/objects/Particle.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/objects/ParticleSystem.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/objects/Line.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/objects/Mesh.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/objects/Bone.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/objects/SkinnedMesh.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/objects/Ribbon.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/objects/LOD.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/objects/Sprite.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/scenes/Scene.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/scenes/Fog.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/scenes/FogExp2.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/renderers/Projector.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/renderers/DOMRenderer.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/renderers/CanvasRenderer.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/renderers/SVGRenderer.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/renderers/WebGLShaders.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/renderers/WebGLRenderer.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/renderers/WebGLRenderTarget.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/renderers/WebGLRenderTargetCube.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/renderers/renderables/RenderableVertex.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/renderers/renderables/RenderableFace3.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/renderers/renderables/RenderableFace4.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/renderers/renderables/RenderableObject.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/renderers/renderables/RenderableParticle.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/renderers/renderables/RenderableLine.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/extras/ColorUtils.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/extras/GeometryUtils.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/extras/ImageUtils.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/extras/SceneUtils.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/extras/ShaderUtils.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/extras/animation/AnimationHandler.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/extras/animation/Animation.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/extras/cameras/FirstPersonCamera.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/extras/cameras/PathCamera.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/extras/cameras/FlyCamera.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/extras/cameras/RollCamera.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/extras/cameras/TrackballCamera.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/extras/cameras/QuakeCamera.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/extras/core/Curve.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/extras/core/CurvePath.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/extras/core/Path.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/extras/core/Shape.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/extras/core/TextPath.js"); 
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/extras/geometries/CubeGeometry.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/extras/geometries/CylinderGeometry.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/extras/geometries/ExtrudeGeometry.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/extras/geometries/IcosahedronGeometry.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/extras/geometries/LatheGeometry.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/extras/geometries/PlaneGeometry.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/extras/geometries/SphereGeometry.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/extras/geometries/TextGeometry.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/extras/geometries/TorusGeometry.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/extras/geometries/TorusKnotGeometry.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/extras/loaders/Loader.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/extras/loaders/JSONLoader.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/extras/loaders/BinaryLoader.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/extras/loaders/SceneLoader.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/extras/loaders/UTF8Loader.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/extras/objects/MarchingCubes.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/extras/objects/Trident.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/extras/physics/Collisions.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/extras/physics/CollisionUtils.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/extras/renderers/AnaglyphWebGLRenderer.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/extras/renderers/CrosseyedWebGLRenderer.js");

		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/RequestAnimationFrame.js");
		$cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs//fonts/helvetiker_regular.typeface.js");
		// $cs->registerScriptFile(Yii::app ()->request->baseUrl. "/js/threejs/Stats.js");
?>
		<style type="text/css">
			body {
				font-family: Monospace;
				background-color: #f0f0f0;
				margin: 0px;
				overflow: hidden;
			}
		</style>
	</head>
	<body>

		
		<script type="text/javascript">

			var container;

			var camera, scene, renderer;

			var cube, plane;
			
			var dice,compass;

			var targetRotateY = 0;var targetRotateX = 0;
			var targetRotateYOnMouseDown = 0,targetRotateXOnMouseDown = 0;

			var mouseX = 0,mouseY=0;
			var mouseXOnMouseDown = 0;
			var mouseYOnMouseDown = 0;
			var windowHalfX = window.innerWidth / 2;
			var windowHalfY = window.innerHeight / 2;

			var wallFront,wallLeft,wallBack,wallRight,wallTop,wallBot;
			
			var mouse = { x: 0, y: 0 };	
			var projector;
			var i=0;
			var mouseDown;
			init();
			animate();

			function init() {
				projector = new THREE.Projector();
				container = document.createElement( 'div' );
				document.body.appendChild( container );

				var info = document.createElement( 'div' );
				info.style.position = 'absolute';
				info.style.top = '10px';
				info.style.width = '100%';
				info.style.textAlign = 'center';
				info.innerHTML = 'Drag to spin the cube';
				container.appendChild( info );

				camera = new THREE.Camera( 100, window.innerWidth / window.innerHeight, 1, 1000 );
				camera.position.y = 150;
				camera.position.z = 500;
				camera.target.position.y = 150;
				
		        // camera = new THREE.FirstPersonCamera( {
		          // fov: 10, aspect: window.innerWidth / window.innerHeight, near: 1, far: 10000,
		          // movementSpeed: 0, lookSpeed: 0.05, noFly: true, lookVertical: true
		        // } );
// 		        
		        // camera.position.set( 700, 2400, 1900 );
		        // camera.lon = -110;
		        // camera.lat = -50;
        

				scene = new THREE.Scene();

				// Cube

				var materials = [];

				for ( var i = 0; i < 6; i ++ ) {

					materials.push( [ new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } ) ] );

				}

				cube = new THREE.Mesh( new THREE.CubeGeometry( 200, 200, 200, 1, 1, 1, materials ), new THREE.MeshFaceMaterial() );
				// cube.position.y = 100;
				cube.overdraw = true;
				// scene.addObject( cube );

				// Plane

				var quality = 16;
				
				var wallFrontGeometry = new THREE.CubeGeometry( 120, 120,0.01,1, 1,  1 );			
				// var wallFrontGeometry=new THREE.PlaneGeometry(160,160,1,1);
				wallFront = new THREE.Mesh( wallFrontGeometry, new THREE.MeshBasicMaterial( { color: 0xababab } ) );
				wallFront.overdraw = true;
				wallFront.position.z = 100.01;
				
				var wallBackGeometry = new THREE.CubeGeometry( 120, 120,0.01,1, 1,  1 );			
				wallBack = new THREE.Mesh( wallBackGeometry, new THREE.MeshBasicMaterial( { color: 0x355809 } ) );
				wallBack.overdraw = true;
				wallBack.position.z = -100.01;
				
				var wallLeftGeometry = new THREE.CubeGeometry(0.01,120,120,1, 1,  1 );            
				wallLeft = new THREE.Mesh( wallLeftGeometry, new THREE.MeshBasicMaterial( { color: 0xcdef01 } ) );
				wallLeft.overdraw = true;				
				wallLeft.position.x = -100.01;

        		var wallRightGeometry = new THREE.CubeGeometry(0.01, 120,120,1, 1,  1 );              
				wallRight = new THREE.Mesh( wallRightGeometry, new THREE.MeshBasicMaterial( { color: 0x01985e } ) );
				wallRight.overdraw = true;
        		wallRight.position.x = 100.01;
        		
				var wallTopGeometry = new THREE.CubeGeometry( 120,0.01,120,1, 1,  1 );          		        
        		wallTop = new THREE.Mesh( wallTopGeometry, new THREE.MeshBasicMaterial( { color: 0xababab } ) );
        		wallTop.overdraw = true;
 				wallTop.position.y = 100.01;
         
        var wallBotGeometry = new THREE.CubeGeometry( 120, 0.01,120,1, 1,  1 );          
        wallBot = new THREE.Mesh( wallBotGeometry, new THREE.MeshBasicMaterial( { color: 0xababab } ) );
        wallBot.overdraw = true;
				wallBot.position.y = -100.01;

        var northsouthGeometry = new THREE.PlaneGeometry( 10, 400, 1,  1 );

        for ( var i = 0, l = northsouthGeometry.vertices.length; i < l; i ++ ) {

          var x = i % quality, y = ~~ ( i / quality );
          northsouthGeometry.vertices[ i ].position.z = -100;
          
        }
        northsouthGeometry.computeCentroids();
        
        var northsouth=new THREE.Mesh(northsouthGeometry,new THREE.MeshBasicMaterial({color:0xf33456}));
		northsouth.rotation.x = - 90 * ( Math.PI / 180 );
        var eastwestGeometry = new THREE.PlaneGeometry( 400, 10, 1,  1 );

        for ( var i = 0, l = eastwestGeometry.vertices.length; i < l; i ++ ) {

          var x = i % quality, y = ~~ ( i / quality );
          eastwestGeometry.vertices[ i ].position.z = -100;
          
        }
        eastwestGeometry.computeCentroids();
        
        var eastwest=new THREE.Mesh(eastwestGeometry,new THREE.MeshBasicMaterial({color:0xf33456}));
        eastwest.rotation.x = - 90 * ( Math.PI / 180 );

    		var theText = "N";
    				var text3d = new THREE.TextGeometry( theText, {
    
    					size: 80,
    					height: 2,
    					curveSegments: 2,
    					font: "helvetiker"
    
    				});

				text3d.computeBoundingBox();
				var centerOffset = -0.5 * ( text3d.boundingBox.x[ 1 ] - text3d.boundingBox.x[ 0 ] );

                var textMaterial = new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, wireframe: false } );
                text = new THREE.Mesh( text3d, textMaterial );

                text.doubleSided = false;

                text.position.x = centerOffset;
                text.position.y = -100;
                text.position.z = -200;

				text.rotation.x = - 90 * ( Math.PI / 180 );
				
				text.overdraw = true;      
				
		// 点        
		var pointGeometry = new THREE.CubeGeometry(40.01,40.01,40.01,1,1,1 );  
		// 横
        var horGeometry = new THREE.CubeGeometry(120.01,40.01,40.01,1,1,1);
        // 竖
        var sidePart3Geometry = new THREE.CubeGeometry(0.01,40,120,1,1,1);
                
        var fltMesh = new THREE.Mesh(pointGeometry,new THREE.MeshBasicMaterial({color:0x112233}));        
        fltMesh.position.x=100-20;
        fltMesh.position.y=100-20;
        fltMesh.position.z=100-20;  
        
        var frtMesh = new THREE.Mesh(pointGeometry,new THREE.MeshBasicMaterial({color:0x112233}));        
        frtMesh.position.x=-100+20;
        frtMesh.position.y=100-20;
        frtMesh.position.z=100-20;  
        
		var frbMesh = new THREE.Mesh(pointGeometry,new THREE.MeshBasicMaterial({color:0x112233}));        
        frbMesh.position.x=-100+20;
        frbMesh.position.y=-100+20;
        frbMesh.position.z=100-20;        
        
		var flbMesh = new THREE.Mesh(pointGeometry,new THREE.MeshBasicMaterial({color:0x112233}));        
        flbMesh.position.x=100-20;
        flbMesh.position.y=-100+20;
        flbMesh.position.z=100-20; 
        
		var ftMesh = new THREE.Mesh(horGeometry,new THREE.MeshBasicMaterial({color:0x112233}));        
        ftMesh.position.x=0;
        ftMesh.position.y=100-20;
        ftMesh.position.z=100-20;  

		var fbMesh = new THREE.Mesh(horGeometry,new THREE.MeshBasicMaterial({color:0x112233}));        
        fbMesh.position.x=0;
        fbMesh.position.y=-100+20;
        fbMesh.position.z=100-20;                 
        
		var btMesh = new THREE.Mesh(horGeometry,new THREE.MeshBasicMaterial({color:0x112233}));        
        btMesh.position.x=0;
        btMesh.position.y=100-20;
        btMesh.position.z=-100+20;  
         
		var bbMesh = new THREE.Mesh(horGeometry,new THREE.MeshBasicMaterial({color:0x112233}));        
        bbMesh.position.x=0;
        bbMesh.position.y=-100+20;
        bbMesh.position.z=-100+20;
               
        dice=new THREE.Object3D();
               
        dice.addChild( wallFront );
        dice.addChild( wallLeft );
        dice.addChild( wallBack );
        dice.addChild( wallRight );
        dice.addChild( wallTop );
        dice.addChild( wallBot );
               
        dice.addChild(cube);
        
        dice.addChild(fltMesh);
        dice.addChild(frtMesh);
        dice.addChild(frbMesh);
        dice.addChild(flbMesh);
        
        dice.addChild(ftMesh);
        dice.addChild(fbMesh);
        dice.addChild(btMesh);
        dice.addChild(bbMesh);
        // dice.rotation.y=- 90 * ( Math.PI / 180 );
        
        compass=new THREE.Object3D();
        compass.addChild(northsouth);
        compass.addChild(eastwest);
        compass.addChild(text);
        scene.addObject(dice);
		scene.addObject(compass);


    		var mcF = THREE.CollisionUtils.MeshColliderWBox(wallFront);
    		mcF.name="Fr";
	        var mcB = THREE.CollisionUtils.MeshColliderWBox(wallBack);
	        mcB.name="Ba";
	        var mcL = THREE.CollisionUtils.MeshColliderWBox(wallLeft);
	        mcL.name="Le";
    		var mcR = THREE.CollisionUtils.MeshColliderWBox(wallRight);
    		mcR.name="Ri";
	        var mcT = THREE.CollisionUtils.MeshColliderWBox(wallTop);
	        mcT.name='To';
	        var mcbT = THREE.CollisionUtils.MeshColliderWBox(wallBot);
	        mcbT.name='Bo';
	        var mcbFLT = THREE.CollisionUtils.MeshColliderWBox(fltMesh);
	        mcbFLT.name='FrLeTo';        
	        var mcbFRT = THREE.CollisionUtils.MeshColliderWBox(frtMesh);
	        mcbFRT.name='FrRiTo';
			var mcbFRB = THREE.CollisionUtils.MeshColliderWBox(frbMesh);
	        mcbFRB.name='FrRiBo';
			var mcbFLB = THREE.CollisionUtils.MeshColliderWBox(flbMesh);
	        mcbFLB.name='FrLeBo';
	        var mcbFT = THREE.CollisionUtils.MeshColliderWBox(ftMesh);
	        mcbFT.name='FrTo';
			var mcbFB = THREE.CollisionUtils.MeshColliderWBox(fbMesh);
	        mcbFB.name='FrBo';
			var mcbBT = THREE.CollisionUtils.MeshColliderWBox(btMesh);
	        mcbBT.name='BaTo';
			var mcbBB = THREE.CollisionUtils.MeshColliderWBox(bbMesh);
	        mcbBB.name='BaBo';
	                	
    		THREE.Collisions.colliders.push( mcF );
    		THREE.Collisions.colliders.push( mcB );
        	THREE.Collisions.colliders.push( mcL );
    		THREE.Collisions.colliders.push( mcR );
    		THREE.Collisions.colliders.push( mcT );
	        THREE.Collisions.colliders.push( mcbT );
	        THREE.Collisions.colliders.push( mcbFLT );
	        THREE.Collisions.colliders.push( mcbFRT );
	        THREE.Collisions.colliders.push( mcbFRB );
	        THREE.Collisions.colliders.push( mcbFLB );
	        THREE.Collisions.colliders.push( mcbFT );
	        THREE.Collisions.colliders.push( mcbFB );
	        THREE.Collisions.colliders.push( mcbBT );
	        THREE.Collisions.colliders.push( mcbBB );
	        
			renderer = new THREE.CanvasRenderer();
			renderer.setSize( window.innerWidth, window.innerHeight );

				container.appendChild( renderer.domElement );


				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
			}

			//

			function onDocumentMouseDown( event ) {

				event.preventDefault();

				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
				document.addEventListener( 'mouseup', onDocumentMouseUp, false );
				document.addEventListener( 'mouseout', onDocumentMouseOut, false );

				mouseXOnMouseDown = event.clientX - windowHalfX;
				targetRotateYOnMouseDown = targetRotateY;
				
				mouseYOnMouseDown = event.clientY - windowHalfY;
				targetRotateXOnMouseDown = targetRotateX;
				
				mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
				mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
				mouseDown=true;
			}

			function onDocumentMouseMove( event ) {

				mouseX = event.clientX - windowHalfX;
				targetRotateY = targetRotateYOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
				
				mouseY = event.clientY - windowHalfY;
				targetRotateX = targetRotateXOnMouseDown + ( mouseY - mouseYOnMouseDown ) * 0.02;
			}

			function onDocumentMouseUp( event ) {

				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
				document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
			}

			function onDocumentMouseOut( event ) {

				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
				document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
			}

			function onDocumentTouchStart( event ) {

				if ( event.touches.length == 1 ) {

					event.preventDefault();

					mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
					targetRotateYOnMouseDown = targetRotateY;

					mouseYOnMouseDown = event.touches[ 0 ].pageY - windowHalfY;
					targetRotateXOnMouseDown = targetRotateX;

				}
			}

			function onDocumentTouchMove( event ) {

				if ( event.touches.length == 1 ) {

					event.preventDefault();

					mouseX = event.touches[ 0 ].pageX - windowHalfX;
					targetRotateY = targetRotateYOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;
					
					mouseY = event.touches[ 0 ].pageY - windowHalfY;
					targetRotateX = targetRotateXOnMouseDown + ( mouseY - mouseYOnMouseDown ) * 0.05;

				}
			}

			//

			function animate() {

				requestAnimationFrame( animate );
				if(mouseDown){

				var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 );
				projector.unprojectVector( vector, camera );
				var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
				var c = THREE.Collisions.rayCastNearest( ray );
				if( c ) {//info.innerHTML += "Found @ distance " + c.distance;
					c.mesh.materials[ 0 ].color.setHex(0xbb0000);
					if(c.name == 'Fr') {
						targetRotateY = 0;
						targetRotateX = 0;
					} else if(c.name == 'Ri') {
						targetRotateY = -90 * (Math.PI / 180 );
						targetRotateX = 0;
					} else if(c.name == 'Le') {
						targetRotateY = 90 * (Math.PI / 180 );
						targetRotateX = 0;
					} else if(c.name == 'Ba') {
						targetRotateY = -180 * (Math.PI / 180 );
						targetRotateX = 0;
					} else if(c.name == 'To') {
						targetRotateY = 0;
						targetRotateX = 90 * (Math.PI / 180 );
					} else if(c.name == 'Bo') {
						targetRotateY = 0;
						targetRotateX = -90 * (Math.PI / 180 );
					} else if(c.name == 'FrLeTo') {
						targetRotateY = -45 * (Math.PI / 180 );
						targetRotateX = 45 * (Math.PI / 180 );
					} else if(c.name == 'FrRiTo') {
						targetRotateY = 45 * (Math.PI / 180 );
						targetRotateX = 45 * (Math.PI / 180 );
					} else if(c.name=='FrRiBo'){
						targetRotateY = 45 * (Math.PI / 180 );
						targetRotateX = -45 * (Math.PI / 180 );	
					} else if(c.name == 'FrLeBo') {
						targetRotateY = -45 * (Math.PI / 180 );
						targetRotateX = -45 * (Math.PI / 180 );
					} else if(c.name == 'FrTo') {
						targetRotateY = 0;
						targetRotateX = 45 * (Math.PI / 180 );
					} else if(c.name == 'FrBo') {
						targetRotateY = 0;
						targetRotateX = -45 * (Math.PI / 180 );
					} else if(c.name == 'BaTo') {
						targetRotateY = -180 * (Math.PI / 180 );
						targetRotateX = 45 * (Math.PI / 180 );
					} else if(c.name == 'BaBo') {
						targetRotateY = -180 * (Math.PI / 180 );
						targetRotateX = -45 * (Math.PI / 180 );
					}
					++i;

					} else {

					//info.innerHTML += "No intersection";

					}
					}
					mouseDown = false;
					mouse = {
						x : 0,
						y : 0
					};

					render();

					}

					function render() {

						dice.rotation.y += ( targetRotateY - dice.rotation.y ) * 0.05;
						dice.rotation.x += ( targetRotateX - dice.rotation.x ) * 0.05;
						compass.rotation.y += ( targetRotateY - compass.rotation.y ) * 0.05;

						renderer.render(scene, camera);

					}</script>

	</body>
</html>
